<template>
  <div class="VoucherPopup">
    <div class="content" @click.stop="stop">
      <div class="close">
        <i class="iconfont icon-guanbi" @click.stop="hide"></i>
      </div>
      <div class="title">
        选择兑换方式
      </div>
      <ul>
        <li v-for="(a,i) in play.price_list" @click="selest(i)">
          <div class="">
            <i class="iconfont" :class="{'icon-wodeqianbao':a.pay_mode_id===2,'icon-fanxian':a.pay_mode_id===1}"></i>
            <span>{{a.pay_mode_name}} (¥{{a.coupon_actual_price}}）</span>
          </div>
          <div class="" v-if="a.pay_mode_id===2">
            可用余额 ¥{{play.balance}}
            <span :class="{'active':i===num}"><i class="iconfont icon-xuanzhong"></i></span>
          </div>
          <div class="" v-else="">
            <span :class="{'active':i===num}"><i class="iconfont icon-xuanzhong"></i></span>
          </div>
        </li>
      </ul>
      <div class="Vipfooter">
        <div class="btn">
          <p><i class="iconfont icon-zhuyi"></i>补学券只能用于补阅读，兑换后无法取消</p>
          <btn :obj='btnstyle' :text="textbtn" v-on:statr="pay(data)"></btn>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import btn from '../../components/btn/index'

  export default {
    name: "index",
    props: ['play'],
    data: function () {
      return {
        btnstyle: {
          backgroundColor: '#ffd000',
          width: '80%',
          color: '#66440a',
          opacity: 1
        },
        num: 0,
        data: {
          coupon_actual_price: this.play.price_list[0].coupon_actual_price,
          pay_mode_id: this.play.price_list[0].pay_mode_id,
          balance: this.play.balance
        },
        textbtn: '立即兑换',
      }
    },
    methods: {
      hide: function () {
        this.$emit('hide')
      },
      stop: function (e) {
        if (e && e.stopPropagation) {
          e.stopPropagation();
        } else {
          window.event.cancelBubble = true
        }
        return false
      },
      selest: function (i) {
        this.num = i
        this.data.coupon_actual_price = this.play.price_list[i].coupon_actual_price
        this.data.pay_mode_id = this.play.price_list[i].pay_mode_id
        this.data.balance = this.play.balance
      },
      pay: function (data) {
        // if (data.pay_mode_id === 2) {
        //   this.$emit('sbmit', data)
        // } else {
        this.$emit('sbmit', data)
        // }
      }
    },
    components: {btn}
  }
</script>

<style scoped>
  @import "./css/index.css";
</style>
